<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>引导页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>
	<style type="text/css">
		.mui-slider-indicator .mui-indicator{
			background:#3856D0;
			-webkit-box-shadow:0 0 1px 1px rgba(0,122,255,.7)
			box-shadow:0 0 1px 1px rgba(0,122,255,.7)
		}
		.guide-img {
			width: 100%;
		}
		#start {
			position: absolute;
			bottom: 50px;
			width: 60%;
			left: 50%;
			margin-left: -30%;
			color: #3856D0;
			height: 40px;
			border-radius: 20px;
		}
	</style>

	<body>
		
		<!-- div.mui-content -->
		<div class="mui-content">
			<!-- msl -->
			<div class="mui-slider">
			  <div class="mui-slider-group">
				<!--第一个内容区容器-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				  <img src="images/bgimg1.jpg" alt="" class="guide-img">
				</div>
				
				<!--第二个内容区-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				  <img src="images/bgimg2.jpg" alt="" class="guide-img">
				</div>
				
				<!--第三个内容区-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				  <img src="images/bgimg3.jpg" alt="" class="guide-img">
				  <button class="mui-btn mui-btn-blue mui-btn-outlined" type="button" id="start">开始体验</button>
				</div>
				
				
			  </div>
			  <div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
		</div>
		
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		// 	mui.plusReady(function() {
		// 		//获取系统状态栏高度
		// 		var sh = plus.navigator.getStatusbarHeight();
		// 		// 获取设备屏幕高度分辨率以及宽度分辨率
		
		// 		var h = plus.screen.resolutionHeight;
		// 		var w = plus.screen.resolutionWidth;
		// 		/**
		// 		 * 设置图片高度，这里图片并不规范；
		// 		 * 实际开发中，建议大家制作iphone6plus规格的图片；
		// 		 */
		// 		var imgs = document.querySelectorAll(".guide-img");
		// 		for(var i = 0, len = imgs.length; i < len; i++) {
		// 			imgs[i].style.height = (h - sh) + "px";
		// 			imgs[i].style.width = w + "px";
		// 		}
		// 		})
		mui.plusReady(function () {
		    //获取系统状态栏高度
			var sh = plus.navigator.getStatusbarHeight()
			//获取设备屏幕高度分辨率以及宽度分辨率
			var h = plus.screen.resolutionHeight;
			var w = plus.screen.resolutionWidth;
			//设置图片高度了
			var imgs =document.querySelectorAll('.guide-img')
			for (var i = 0,len = imgs.length;i < len; i++) {
				imgs[i].style.height = (h-sh) + "px";
				imgs[i].style.width = w + "px"
				
			}
			plus.navigator.closeSplashscreen();
			document.querySelector('#start').addEventListener('tap',function(){
				// plus.nativeUI.alert('hello')//根据设备系统的UI
				
				//先把看过启动页面的状态存储起来
				plus.storage.setItem('launch','true');//此缓存不能使用布尔值，只能存字符串
				//使用webview“切换”“显示”回到主页面
				let index =  plus.webview.create('index.html','index');
				index.show()
				
				
				
			})
			
		})
		</script>
	</body>

</html>
